<template>
  <div class="detail">
    <!-- 引用头部，绑定点击事件 -->
    <div class="header">
      <van-nav-bar title="详情页" @click-left="onClickLeft">
        <template #left>
          <!-- 返回 -->
          <van-icon name="arrow-left" size="30" color="black" />
        </template>
        <template #right>
          <van-popover
            v-model="showPopover"
            trigger="click"
            :actions="actions"
            @select="onSelect"
            placement="bottom-end"
            theme="dark"
          >
            <template #reference>
              <!-- ... -->
              <van-icon name="ellipsis" size="30" color="black" />
            </template>
          </van-popover>
        </template>
      </van-nav-bar>
    </div>
    <!-- 中间 -->
    <!-- 渲染详情页轮播图 -->
    <div class="container">
      <van-swipe class="my-swipe" :autoplay="3000">
        <!-- 后台data每一个item就是一个图片路径，src直接用item -->
        <van-swipe-item v-for="(item, index) in bannerList" :key="index">
          <img :src="item" />
        </van-swipe-item>
      </van-swipe>
      <div class="price">
        <p>￥{{ price }}</p>
        <!-- 引用倒计时 -->
        <van-count-down :time="time" class="daojishi">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </div>
      <div class="title">
        <h4>{{ title }}</h4>
      </div>
    </div>
    <!-- 底部加购引用 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>

    <!-- 分享面板 -->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
    />
  </div>
</template>

<script>
import { getBannerList } from "../api/detail";
import Vue from "vue";
import {
  NavBar,
  Popover,
  ShareSheet,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
 /*  CountDown, */
} from "vant";
Vue.use(NavBar);
Vue.use(Popover);
Vue.use(ShareSheet);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
/* Vue.use(CountDown); */
export default {
  data() {
    return {
      bannerList: [],
      showPopover: false,
      actions: [
        { text: "首页", icon: "wap-home-o" },
        { text: "分享", icon: "share-o" },
      ],
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      price: 0,
      title: "",
      time: 12 * 60 * 60 * 1000,
    };
  },
  created() {
    console.log(this.$route.params.proid);
    getBannerList(this.$route.params.proid).then((data) => {
      //console.log(data.data.data.banners[0].split(","));
      this.bannerList = data.data.data.banners[0].split(",");
      //console.log(data.data.data);
      this.price = data.data.data.originprice;
      this.title = data.data.data.proname;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onSelect(action, index) {
      switch (index) {
        case 0:
          this.$router.back();
          break;
        case 1:
          this.showShare = true;
          break;
        default:
          break;
      }
    },
    onSelect1(option) {
      console.log(option.name);
      this.showShare = false;
    },
  },
};
</script>

<style scoped>
.my-swipe {
  height: 2rem;
}
.my-swipe img {
  width: 100%;
  height: 2rem;
}
.price {
  padding: 0 15px;
  margin: 10px 0;
  color: red;
  display: flex;
  font-weight: bold;
}
.daojishi {
  position: fixed;
  right: 0.2rem;
  top: 2.6rem;
}
.title {
  padding: 0 15px;
  margin: 10px 0;
  color: black;
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
</style>